@import "../common.scss";

body{
	background-color: #fff;
}
.content{
	padding: 0 ws(20);
	padding-top: ws(30);
}
.user{
	display: flex;
	padding: ws(15) 0;
	align-items: center;
	justify-content: space-between;
	@include border-line(#e6e6e6,bottom);
	.name{
		font-size: ws(25);
		color: #545454;
	}
	.img{
		width: ws(70);
		height: ws(70);
		border-radius: 50%;
		margin-right: ws(30);
		box-shadow: 0 0 0 ws(1) #eee;
	}
	.mui-icon{
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		font-size: ws(20);
		display: inline-table;
	}
}

.account{
	margin: ws(30) 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.account-num{
		display: flex;
		flex-direction: column;
		> span{
			color: #999;
		}
		.num{
			display: flex;
			align-items: center;
			font-size: ws(25);
			color: $main-color;
			margin-left: ws(-2);
			.icon{
				width: ws(25);
				height: ws(25);
			}
		}
	}
	.btn{
		height: ws(30);
		width: ws(95);
		text-align: center;
		line-height: ws(30);
		font-size: ws(16);
		color: #414141;
		border-radius: ws(23);
		box-shadow: 0 0 0 ws(1) #414141;
	}
}

.user-house{
	margin-top: ws(25);
	display: flex;
	justify-content: space-between;
	.item{
		width: ws(100);
		height: ws(80);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: ws(15);
		&:nth-child(1){
			background-color: #f77f7f;
			box-shadow:0 ws(1) ws(2) 0 #f77f7f;
		}
		&:nth-child(2){
			background-color: #ffc26d;
			box-shadow:0 ws(1) ws(2) 0 #ffc26d;
		}
		&:nth-child(3){
			background-color: #8898f5;
			box-shadow:0 ws(1) ws(5) 0 #8898f5;
		}
		.item-image{
			width: ws(35);
			height: ws(35);
			margin-bottom: ws(2);
			> img {
				width: 100%;
				height: 100%;
			}
		}
		.item-text{
			font-size: ws(14);
			color: #fff;
		}
	}
}

.user-list{
	margin-top: ws(15);
	.item{
		height: ws(50);
		display: flex;
		align-items: center;
		justify-content: space-between;
		@include border-line(#dcdcdc,bottom);
		&:last-child{
			@include border-line(#fff,bottom);
		}
		.item-desc{
			display: flex;
			align-items: center;
			color: #818181;
			font-size: ws(14);
			> img {
				width: ws(30/2);
				height: ws(30/2);
				margin-right: ws(10);
			}
		}
		.mui-icon{
			font-size: ws(20);
			color: #bababa;
			margin-right: ws(-5);
		}
	}
}